<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: 'DistrictClusterMap',
  data() {
    return {
      map: null,
      distCluster: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图
      this.map = new AMap.Map('container', {
        zoom: 4
      });

      // 加载相关组件
      AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], (DistrictCluster, $) => {
        // 创建 DistrictCluster 实例
        this.distCluster = new DistrictCluster({
          map: this.map,
          zIndex: 11,
          getPosition: item => {
            if (!item) {
              return null;
            }
            var parts = item.split(',');
            return [parseFloat(parts[0]), parseFloat(parts[1])];
          }
        });

        // 加载数据
        $.get('https://a.amap.com/amap-ui/static/data/10w.txt', csv => {
          this.distCluster.setData(csv.split('\n'));
        });
      });
    }
  }
};
</script>

<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
}

#loadingTip {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  padding: 3px 10px;
  background: red;
  color: #fff;
  font-size: 14px;
}
</style>